<!DOCTYPE html>
<html>
<head>
  <title>Basic fotorama</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <!-- jQuery -->
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

  <!-- Fotorama -->
  <link href="fotorama.css" rel="stylesheet">
  <script src="fotorama.js"></script>

  <!-- Just don’t want to repeat this prefix in every img[src] -->
  <base href="http://fotorama.s3.amazonaws.com/i/okonechnikov/">
</head>

<body>

<!-- Fotorama -->
<div class="fotorama" data-width="700" data-ratio="700/467" data-max-width="100%">
  <img src="1-lo.jpg">
  <img src="2-lo.jpg">
  <img src="9-lo.jpg">
  <img src="6-lo.jpg">
  <img src="5-lo.jpg">
</div>

<!-- © -->
<p>Photos <a href="http://okonet.ru/">by Andrey Okonetchnikov</a></p>
</body>
</html>